<template>
  <!--表单组件-->
  <el-dialog :close-on-click-modal="false" :before-close="handleBeforeClose"
    :visible=true :title="title" width="90%">

    <el-form ref="form" :model="form" size="small" label-width="100px">
      <el-table :data="tableData">
        <el-table-column prop="parameter" label="训练参数" width="90px"/>
        <el-table-column label="地面" width="50px">
          <template #default="scope">
              <el-input v-model="scope.row.xlqDm" type="number" />
            </template>
        </el-table-column>
        <el-table-column prop="xl5500" label="5500">
          <el-table-column label="即刻" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl5500" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="吸氧排氮" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl5500Xypd" type="number" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="7000">
          <el-table-column label="即刻"  width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="20"  width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl700020" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="40"  width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl700040" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="60" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl700060" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="80" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl700080" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="100" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000100" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="2min" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000120" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="140" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000140" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="160" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000160" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="3min" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000180" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="200" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000200" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="220" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000220" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="4min" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000240" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="260" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000260" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="280" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000280" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="5min" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000300" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="320" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000320" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="340" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000340" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="6min" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl7000360" type="number" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="xlh5500" label="5500">
          <el-table-column label="即刻" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xlh5500" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="60" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xlh550060" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="120" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xlh5500120" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="180" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xlh5500180" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="240" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xlh5500240" type="number" />
            </template>
          </el-table-column>
          <el-table-column label="300" width="50px">
            <template #default="scope">
              <el-input  v-model="scope.row.xlh5500300" type="number" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="地面" width="50px">
          <template #default="scope">
              <el-input v-model="scope.row.xlhDm" type="number" />
            </template>
        </el-table-column>
      </el-table>
      
      <el-form-item label="主观症状">
        <el-select
          v-model="selectedFeels"
          placeholder="请选择"
          multiple
          filterable
          clearable
          style="width: 100%;">
          <el-option
            v-for="feel in feelList"
            :key="feel.name"
            :label="feel.name"
            :value="feel.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="其他症状">
        <el-input type="textarea" v-model="otherFeel" />
      </el-form-item>

      <el-form-item label="书写表现">
        <el-input type="textarea" v-model="form.sxbx" />
      </el-form-item>

      <el-form-item label="医师建议">
        <el-input type="textarea" v-model="form.jy"/>
      </el-form-item>

      <el-row>
        <el-col :span="8" >
          <el-form-item label="结果判定">
            <el-select
              v-model="form.result"
              placeholder="请选择">
              <el-option
                v-for="[key, value] in resultOptions"
                :key="value"
                :label="value"
                :value="key"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="记录人" prop="createBy">
            <el-input v-model="form.createBy" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录日期" prop="createTime">
            <el-date-picker v-model="form.createTime" :picker-options="pickerOptions" type="date" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleCommit" :disabled="disabled">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
import {get, edit, add} from '@/api/trainDycgksl'
import { mapGetters, mapActions } from 'vuex'
import { table2Form, form2Table } from '@/utils/table'

import { RATE_RESULTS} from '@/utils/constants'


const defaultForm = { id: null, trainId: null, xlqDm: null, xl5500Xypd: null, xl5500: null, 
  xlh5500: null, xlh550060: null, xlh5500120: null, xlh5500180: null, xlh5500240: null, xlh5500300: null, xl7000: null, 
  xl700020: null, xl700040: null, xl700060: null, xl700080: null, xl7000100: null, xl7000120: null, xl7000140: null, 
  xl7000160: null, xl7000180: null, xl7000200: null, xl7000220: null, xl7000240: null, xl7000260: null, xl7000280: null, xl7000300: null, xl7000320: null, xl7000340: null, xl7000360: null, xlhDm: null, 
  feels: [], sxbx: null, result: null, jy: null, date: null, createBy: null, trainItemId: null, createTime: null }
export default {
  name: 'Dycgksldialog',
  props: {
    trainId: {
      type: Number,
      default: -1,
      required: true
    },
    itemId: {
      type: Number,
      default: -1,
      required: true
    }
  },
  computed: {
    disabled() {
      return this.form.id != null && !this.checkPer(['admin']);
    },
    ...mapGetters('feel', ['feelList'])
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      tableData: [
        // { parameter: '时间（s)'},
        { parameter: '血氧饱和度%', xlqDm: "", xl5500: "", xl5500Xypd: "", xl7000: "", xl700020: "",
          xl700040: "", xl700060: "", xl700080: "", xl7000100: "", xl7000120: "", xl7000140: "",
          xl7000160: "", xl7000180: "", xl7000200: "", xl7000220: "", xl7000240: "", xl7000260: "",
          xl7000280: "", xl7000300: "", xl7000320: "", xl7000340: "", xl7000360: "", xlh5500: "",
          xlh550060: "", xlh5500120: "", xlh5500180: "", xlh5500240: "", xlh5500300: "", xlhDm: ""},
        { parameter: '心率(次/分)', xlqDm: "", xl5500: "", xl5500Xypd: "", xl7000: "", xl700020: "",
          xl700040: "", xl700060: "", xl700080: "", xl7000100: "", xl7000120: "", xl7000140: "",
          xl7000160: "", xl7000180: "", xl7000200: "", xl7000220: "", xl7000240: "", xl7000260: "",
          xl7000280: "", xl7000300: "", xl7000320: "", xl7000340: "", xl7000360: "", xlh5500: "",
          xlh550060: "", xlh5500120: "", xlh5500180: "", xlh5500240: "", xlh5500300: "", xlhDm: ""},

        { parameter: '呼吸(次/分)', xlqDm: "", xl5500: "", xl5500Xypd: "", xl7000: "", xl700020: "",
          xl700040: "", xl700060: "", xl700080: "", xl7000100: "", xl7000120: "", xl7000140: "",
          xl7000160: "", xl7000180: "", xl7000200: "", xl7000220: "", xl7000240: "", xl7000260: "",
          xl7000280: "", xl7000300: "", xl7000320: "", xl7000340: "", xl7000360: "", xlh5500: "",
          xlh550060: "", xlh5500120: "", xlh5500180: "", xlh5500240: "", xlh5500300: "", xlhDm: ""},
        { parameter: '血压(mmHg)', xlqDm: "", xl5500: "", xl5500Xypd: "", xl7000: "", xl700020: "",
          xl700040: "", xl700060: "", xl700080: "", xl7000100: "", xl7000120: "", xl7000140: "",
          xl7000160: "", xl7000180: "", xl7000200: "", xl7000220: "", xl7000240: "", xl7000260: "",
          xl7000280: "", xl7000300: "", xl7000320: "", xl7000340: "", xl7000360: "", xlh5500: "",
          xlh550060: "", xlh5500120: "", xlh5500180: "", xlh5500240: "", xlh5500300: "", xlhDm: ""},
      ],

      form: { ...defaultForm },
      title: '低压舱高空生理',
      resultOptions: RATE_RESULTS,
      isLoading: false, // 提交按钮的加载状态
      selectedFeels: [],
      otherFeel: ''
    };
  },
  methods: {
    ...mapActions('feel', ['getFeelList']),
    handleBeforeClose(done) {
      this.$emit('close', this.itemId);
      if (done) {
        done(); // 调用done()来关闭对话框        
      }
    },
    handleCommit() {
      this.form.feels = this.selectedFeels.join('|') + '|' + this.otherFeel;
      table2Form(this.tableData, this.form)
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.isLoading = true; // 提交按钮的加载状态
          this.form.trainId = this.trainId;
          this.form.trainItemId = this.itemId;
          if (this.form.id == null) {
            add(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          } else {
            edit(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          }
        }
      })
    },
    handleCancel() {
      this.$emit('cancel', this.itemId);
    }
  },
  created() {
    if (this.trainId !== -1) {
      // 使用 Vuex 获取感受列表
      this.getFeelList({current: 1, size: 100})
      
      get(this.trainId, this.itemId).then(response => {
        this.form = Object.assign(this.form, response);
        const feels = this.form.feels.split('|');
        if (feels.length > 1) {
          this.selectedFeels = feels.slice(0, -1).map(id => parseInt(id))
          this.otherFeel = feels[feels.length - 1]
        }

        form2Table(this.form, this.tableData)
      });
    }
  },
  updated() {

    // 组件更新后执行的逻辑，比如获取数据
  },
  mounted() {
  }
}
</script>

<style scoped>
::v-deep .el-input__inner {
  text-align: center;
  padding: 0;
}
::v-deep .el-table--small .el-table__cell {
  padding: 0;
}
.el-table {
  margin-bottom: 20px;
}
::v-deep .el-table .cell {
  padding: 0;
}

::v-deep .el-table th.el-table__cell>.cell {
  text-align: center;
}

</style>